<template>
  <div class="refund_storage_container">
    <div class="base_info_container">
      <div class="grey_title_container">
        <span class="indicator"></span>
        <span class="text">基本信息</span>
      </div>
      <div class="base_info_content_container form_container">
        <el-row :gutter="32">
          <el-col :span="3" class="item">
            <div class="text_container">
              <span class="text">客户:</span>
              <span class="text">吴晓晓</span>
            </div>
          </el-col>
          <el-col :span="3" class="item">
            <div class="text_container">
              <span class="text">咨询师:</span>
              <span class="text">安俊杰</span>
            </div>
          </el-col>
          <el-col :span="6" class="item">
            <div class="text_container">
              <span class="require">*</span>
              <span class="text">退款类型:</span>
            </div>
            <el-select v-model="selectedRefundType" placeholder="请选择" size="mini">
              <el-option
                v-for="item in refundTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="6" class="item">
            <div class="text_container">
              <span class="require">*</span>
              <span class="text">退款原因:</span>
            </div>
            <el-select v-model="selectedRefundReason" placeholder="请选择" size="mini">
              <el-option
                v-for="item in refundReasons"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="table_container">
      <el-table
        :span-method="calProductSpan"
        :data="products"
        border>
        <el-table-column
          width="35"
          align="center">
          <template slot-scope="scope">
            <el-radio></el-radio>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="储值账户名称">
          <template slot-scope="scope">
            <div>十大项目</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="key2"
          align="center"
          width="80"
          label="">
        </el-table-column>
        <el-table-column
          prop="key3"
          align="center"
          width="120"
          label="储值现金">
        </el-table-column>
        <el-table-column
          prop="key4"
          align="center"
          width="120"
          label="储值赠送">
        </el-table-column>
        <el-table-column
          prop="key5"
          width="500"
          align="center"
          label="备注">
        </el-table-column>
      </el-table>
    </div>
    <div class="operate_container">
      <el-button type="primary" style="padding-left: 45px; padding-right: 45px;">提交申请</el-button>
      <el-button style="padding-left: 45px; padding-right: 45px;">取消</el-button>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import Component from 'vue-class-component';

  @Component
  export default class RefundStorage extends Vue {
    refundTypes = [{value: '1', label: '转项目退款'}];
    refundReasons = [{value: '1', label: '客户要求终止治疗'}];
    selectedRefundType = '';
    selectedRefundReason = '';
    products = [{
      key1: '十大项目',
      key2: '余额',
      key3: '1200.00',
      key4: '5000.00',
      memo: ''
    }, {
      key1: '十大项目',
      key2: '退款',
      key3: '1200.00',
      key4: '5000.00',
      memo: ''
    }, {
      key1: '十大项目',
      key2: '结余',
      key3: '0.00',
      key4: '0.00',
      memo: ''
    }, {
      key1: '悦颜荟',
      key2: '余额',
      key3: '1200.00',
      key4: '5000.00',
      memo: ''
    }, {
      key1: '悦颜荟',
      key2: '退款',
      key3: '1200.00',
      key4: '5000.00',
      memo: ''
    }, {
      key1: '悦颜荟',
      key2: '结余',
      key3: '0.00',
      key4: '0.00',
      memo: ''
    }
    ];

    calProductSpan({row, column, rowIndex, columnIndex}) {
      if (rowIndex % 3 === 0) {
        if (columnIndex === 0 || columnIndex === 1 || columnIndex === 5) {
          return [3, 1];
        }
      } else {
        if (columnIndex === 0 || columnIndex === 1 || columnIndex === 5) {
          return [0, 0];
        }
      }
      return [1, 1];
    }
  }
</script>

<style scoped>
  .refund_storage_container {
  }

  .base_info_container {
    border-top: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
  }

  .base_info_content_container {
    padding: 15px 10px;
  }

  .operate_container {
    margin-top: 30px;
    text-align: center;
  }
</style>
